<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>视频详情</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/video.css" />
	<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
</head>

<body>
	</div>
	<div id="app" v-cloak>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="item in videoList">
					<video :src="item.file" height="100%" width="100%" loop class="video1" preload :poster="item.file + '?vframe/jpg/offset/1'" playsinline="true" webkit-playsinline="true"></video>
				</div>
			</div>
			<div class="control-wrap" v-show='contentShow'>
				<div @click.stop="togglePlayStatus" @dblclick="dbl(videoContent.id)" class="playing">
					<i v-if="!player_pause" class="iconfont icon-bofang"></i>
				</div>
				<div class="goback" @click="goback">
					<i class="iconfont icon-pre"></i>
				</div>
				<div class="userInfo">
					<div class="name">@{{videoContent.info.member.name}}</div>
					<div class="description">{{videoContent.info.description}}</div>
				</div>
				<div class="menu-list">
					<div class="menu-item avatar-wrap">
						<img :src="videoContent.info.member.avatar" alt="" @click.stop='openUser(videoContent.info.member_id)'>
						<i @click.stop="follow(videoContent.info.member_id)" v-if="videoContent.is_follow == 0" class="iconfont icon-font-add"></i>
						<i @click.stop="follow(videoContent.info.member_id)" v-else class="iconfont icon-right-2"></i>
					</div>
					<div @click="like(videoContent.info.id)" class="menu-item like-wrap">
						<i :class="['iconfont', 'icon-xin', videoContent.is_like == 1 ? 'active' : '']"></i>
						<div class="text">{{videoContent.info.like_size}}</div>
					</div>
					<div class="menu-item read-wrap">
						<i class="iconfont icon-yanjing"></i>
						<div class="text">{{videoContent.info.view_size}}</div>
					</div>
					<div @click="openActionMenu(videoContent.info.id)" class="menu-item share-wrap">
						<i class="iconfont icon-fenxiang"></i>
						<div class="text">{{videoContent.info.share_size}}</div>
					</div>
					<!-- <div class="menu-item video-wrap" @click="call">
						<i class="iconfont icon-shipin1"></i>
						<span>与ta视频</span>
					</div> -->
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
	var app, swiper;
	apiready = function () {
		dialogBox = api.require('dialogBox');
		app = new Vue({
			el: '#app',
			data: {
				index: 0,
				video_id: '',
				id: '',
				name: '',
				description: '',
				avatar: '',
				like_size: '',
				view_size: '',
				share_size: '',
				is_follow: 0,
				is_like: 0,
				player_pause: true,
				dblclick: true,
				videoList: [],
				videoIndex: 0,
				videoContent: {
					info: {
						member: {}
					},
					is_like: '',
				},
				contentShow: true,
				video1: document.getElementsByClassName("video1"),
				shareTitle: '',
				shareContent: '',
				shareUrl: '',
				shareImage: '',
				shareImageQQ: '',
			},
			created: function () {
        var _this = this
				_this.videoList = [];
				_this.videoList = api.pageParam.videoList;
			},
			mounted: function () {
				var _this = this
				var pageList = api.pageParam.videoList
				var video1 = document.getElementsByClassName("video1");
				var index = 0;
				video1[api.pageParam.index].play()
				var swiper = new Swiper('.swiper-container', {
					direction: 'vertical',
					width: window.innerWidth,
					height: window.innerHeight,
					initialSlide: api.pageParam.index,
					on: {
						init: function () {
							this.emit('transitionEnd');
							_this.videoIndex = this.activeIndex
							api.ajax({
								url: baseUrl + 'video/detail',
								method: 'get',
								headers: {
									token: $api.getStorage('deviceToken')
								},
								data: {
									values: {
										uid: $api.getStorage('uid'),
										id: api.pageParam.videoList[this.activeIndex].id
									},
								}
							}, function (ret, err) {
								api.hideProgress();
								if (ret && ret.status == 200) {
									_this.videoContent = ret.data;
								}
								if (err) {
									api.toast({
										msg: '网络错误，请稍后再试'
									});
								}
							});
						},
						sliderMove: function (event) {
							_this.contentShow = false;
						},
						transitionEnd: function () {
							_this.contentShow = true;
						},
						slideChangeTransitionEnd: function () {
							_this.videoContent = {
                info: {
                  member: {}
                },
                is_like: '',
              },
              api.ajax({
                url: baseUrl + 'video/detail',
                method: 'get',
                headers: {
                  token: $api.getStorage('deviceToken')
                },
                data: {
                  values: {
                    uid: $api.getStorage('uid'),
                    id: api.pageParam.videoList[this.activeIndex].id
                  },
                }
              }, function (ret, err) {
                api.hideProgress();
                if (ret && ret.status == 200) {
                  _this.videoContent = ret.data;
                }
                if (err) {
                  api.toast({
                    msg: '网络错误，请稍后再试'
                  });
                }
              });
							video1[index].pause()
							video1[this.activeIndex].autoplay = true
							video1[this.activeIndex].load()
							index = this.activeIndex;
							_this.videoIndex = this.activeIndex
						},
						slideChangeTransitionStart: function () {
							// alert(this.activeIndex);
						},
						reachEnd: function () {
							api.sendEvent({
								name: 'videoPush',
							})
							setTimeout(function () {
								swiper.updateSlides();
							}, 500)
						},
					},

				})
				// 左滑打开个人中心
				var currentX = 0;
				var moveX = 0;
				var endX = 0;
				addEventListener("touchstart", function (event) {
					currentX = event.changedTouches[0].screenX;
				});
				addEventListener("touchmove", function (event) {
					moveX = event.changedTouches[0].screenX;
				});
				addEventListener("touchend", function (event) {
					endX = event.changedTouches[0].screenX;
					if (currentX - endX > 100) {
						_this.openUser(_this.videoList[_this.videoIndex].member.member_id)
					}
				});
				// 监听退出外边向上卷曲
				api.addEventListener({
					name: 'keyback'
				}, function (ret, err) {
					var scrollIndex = _this.videoIndex
					scrollIndex = Math.floor(scrollIndex / 2);
					api.sendEvent({
						name: 'scrollIndex',
						extra: {
							key1: scrollIndex,
						}
					});
					api.closeWin();
				});
				//监听外边分页的内容  加载
				api.addEventListener({
					name: 'pushList',
				}, function (ret, err) {
					for (var i = 0; i < ret.value.key1.length; i++) {
						_this.videoList.push(ret.value.key1[i])
					}
				});
				api.addEventListener({
					name: 'videoPlay'
				}, function (ret, err) {
					_this.video1[_this.videoIndex].play()
				});
			},
			methods: {
				openUser: function (id) {
					api.openWin({
						name: 'user_home',
						url: 'user_home.html',
						slidBackEnabled: false,
						pageParam: {
							member_id: id
						},
						animation: {
							type: "movein",
							subType: "from_right",
							duration: 300
						}
					});
					this.video1[this.videoIndex].pause();
        },
        
				dbl: function (id) {
					var _this = this;
					this.like(id);
					_this.dblclick = false;
					setTimeout(function () {
						_this.dblclick = true;
					}, 500)
        },
        
				goback: function () {
					api.closeWin();
        },
        
				togglePlayStatus: function () {
					var _this = this;
					setTimeout(function () {
						if (_this.dblclick) {
							if (_this.player_pause) {
								_this.video1[_this.videoIndex].pause()
							} else {
								_this.video1[_this.videoIndex].play()
							}
							_this.player_pause = !_this.player_pause
							_this.dblclick = true;
						}
					}, 500)
        },
        
				follow: function (id) {
					var _this = this;
					api.showProgress({
						title: '',
						text: ''
					});
					api.ajax({
						url: baseUrl + 'user/follow',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								to_uid: id
							},
						}
					}, function (ret, err) {
						api.hideProgress();
						if (ret) {
							api.toast({
								msg: ret.message[0]
							});
							if (ret.status == 200) {
								_this.videoContent.is_follow = 1
							}
							if (ret.status == 201) {
								_this.videoContent.is_follow = 0
							}
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
				},

				like: function (video_id) {
					var _this = this;
					// api.showProgress({
					//   title: '',
					//   text: ''
					// });
					api.ajax({
						url: baseUrl + 'video/like',
						method: 'post',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								id: video_id
							},
						}
					}, function (ret, err) {
						if (ret) {
							api.toast({
								msg: ret.message[0]
							});
							if (ret.status == 200) {
								_this.videoContent.is_like = 1
								_this.videoContent.info.like_size++

							}
							if (ret.status == 201) {
								_this.videoContent.is_like = 0
								_this.videoContent.info.like_size--
							}
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试'
							});
						}
					});
        },
        
				call: function () {
					var _this = this;
					var tempExtra = {
						fromId: $api.getStorage('uid'),
						fromName: $api.getStorage('uname'),
						fromAvatar: $api.getStorage('uavatar'),
						toId: _this.id,
						toName: _this.name,
						toAvatar: _this.avatarr,
					};
					// 发起视频
					api.ajax({
						url: baseUrl + 'message/videoCall',
						method: 'post',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								from_uid: $api.getStorage('uid'),
								to_uid: _this.id,
								type: '0',
							},
						}
					}, function (ret, err) {
						if (ret.status == 200) {
							_this.video1[_this.videoIndex].pause()
							api.openWin({
								name: 'call1',
								url: 'call1.html',
								slidBackEnabled: false,
								pageParam: {
									extra: tempExtra,
									type: 'videoCall',
									time: ret.data.time,
								}
							});
						} else if (ret.status == 401) {
							_this.getDialogBoxRecharge(ret.message[0]);
						} else {
							api.toast({
								msg: ret.message[0]
							})
						}
					})
				},

				getDialogBoxRecharge: function (txt) {
					dialogBox.evaluation({
						styles: {
							bg: '#fff',
							corner: 2,
							w: 300,
							title: {
								marginT: 20,
								size: 14,
								h: 50,
								color: '#000',
								bold: true,
								borderColor: '#eee',
								borderWidth: 1
							},
							buttons: [{
								w: 300,
								h: 50,
								color: '#0077ff',
								size: 14,
								borderColor: '#eee',
								borderWidth: 1
							}, {
								w: 300,
								h: 50,
								color: '#0077ff',
								size: 14,
								borderColor: '#eee',
								borderWidth: 1
							}, {
								w: 300,
								h: 50,
								color: '#000',
								size: 14
							}]
						},
						texts: {
							title: txt,
							buttons: [{
								text: '去赚钱'
							}, {
								text: '去充值'
							}, {
								text: '取消'
							}]
						},
						tapClose: true
					}, function (ret, err) {
						if (ret) {
							if (ret.index == 0) {
								dialogBox.close({
									dialogName: 'evaluation'
								});
								api.openWin({
									name: 'my_share',
									url: 'my_share.html',
									slidBackEnabled: false
								});
							}
							if (ret.index == 1) {
								dialogBox.close({
									dialogName: 'evaluation'
								});
								api.openWin({
									name: 'recharge',
									url: 'recharge.html',
									slidBackEnabled: false
								});
							}
							if (ret.index == 2) {
								dialogBox.close({
									dialogName: 'evaluation'
								});
							}
						}
					});
				},

				planShare: function (id) {
					var _this = this;
					api.ajax({
						url: baseUrl + 'share/index',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								type: 'video'
							},
						}
					}, function (ret, err) {
						if (ret.status == 200) {
							_this.shareTitle = ret.data.title;
							_this.shareContent = ret.data.content;
							_this.shareUrl = ret.data.url + '?channel=' + $api.getStorage('channel') + '&tuid=' + $api.getStorage('uid');
							_this.shareImage = ret.data.image;
							_this.shareImageQQ = ret.data.image;
						}
					})
				},
				
				openActionMenu: function (id) {
					var _this = this;
					_this.planShare(id);
					dialogBox.actionMenu({
						rect: {
							h: 140
						},
						items: [{
							text: '微信好友',
							icon: 'widget://image/circular-WeChat.png'
						}, {
							text: '微信朋友圈',
							icon: 'widget://image/circle-friend.png'
						}],
						styles: {
							bg: '#FFF',
							column: 2,
							itemText: {
								color: '#000',
								size: 14,
								marginT: 10
							},
							itemIcon: {
								size: 60
							}
						},
						tapClose: true
					}, function (ret) {
						var wx = api.require('wx');
						var qq = api.require('QQPlus');
						if (ret.index == 0) {
							wx.shareWebpage({
								scene: 'session',
								title: _this.shareTitle,
								description: _this.shareContent,
								thumb: _this.shareImage,
								contentUrl: _this.shareUrl
							}, function (ret, err) {
								_this.closdialg();
								if (ret.status) {
									api.toast({
										msg: '分享成功'
									});
								} else {
									api.toast({
										msg: '分享失败'
									});
								}
							});
						}
						if (ret.index == 1) {
							wx.shareWebpage({
								scene: 'timeline',
								title: _this.shareTitle,
								description: _this.shareContent,
								thumb: _this.shareImage,
								contentUrl: _this.shareUrl
							}, function (ret, err) {
								_this.closdialg();
								if (ret.status) {
									api.toast({
										msg: '分享成功'
									});
								} else {
									api.toast({
										msg: '分享失败'
									});
								}
							});
						}
						if (ret.index == 2) {
							qq.shareNews({
								type: 'QFriend',
								url: _this.shareUrl,
								title: _this.shareTitle,
								description: _this.shareContent,
								imgUrl: _this.shareImageQQ
							}, function (ret, err) {
								_this.closdialg();
								if (ret.status) {
									api.toast({
										msg: '分享成功'
									});
								} else {
									api.toast({
										msg: '分享失败'
									});
								}
							});
						}
						if (ret.index == 3) {
							qq.shareNews({
								type: 'QZone',
								url: _this.shareUrl,
								title: _this.shareTitle,
								description: _this.shareContent,
								imgUrl: _this.shareImageQQ
							}, function (ret, err) {
								_this.closdialg();
								if (ret.status) {
									api.toast({
										msg: '分享成功'
									});
								} else {
									api.toast({
										msg: '分享失败'
									});
								}
							});
						}
					});
				},

				closdialg: function () {
					dialogBox.close({
						dialogName: 'actionMenu'
					});
				},

			},
		})
	}
</script>